<template>
  <el-card>
    <div class="head-container treescroll">
      <el-tree
        :data="protreeOptions"
        :props="defaultProps"
        :expand-on-click-node="false"
        :highlight-current="true"
        :filter-node-method="filterNode"
        node-key="pointId"
        ref="tree"
        default-expand-all
        @node-click="handleNodeClick">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>
                      <i :class="data.icon"></i>{{ node.label }}
                  </span>
              </span>
      </el-tree>
    </div>
  </el-card>
</template>

<script>
import { treeSelectPoint } from "@/api/basic/protree";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "PointTreeList",
  data() {
    return {
      // 遮罩层
      loading: true,
      protreeOptions: undefined,
      pointId : undefined,
      pointName:undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      key:null
    };
  },
  watch: {

  },
  created() {
    this.getTreeselect();
  },
  methods: {
    /** 查询区域下拉树结构 */
    getTreeselect() {
      let _this=this;
      this.loading = true;
      treeSelectPoint().then(response => {
        this.protreeOptions = response.data.treeList;
        this.pointId = response.data.pointId;
        if(this.$refs.tree){
          this.$nextTick(() => {
            _this.$refs.tree.setCurrentKey(_this.pointId);
            _this.$emit('handlePointClick', {pointId:_this.pointId});
            _this.$refs.tree.filter("");
          });
        }
        this.loading = false;
      });
    },
    // 筛选节点
    // 触发页面显示配置的筛选
    filterNode(value, data, node) {
      if (data.pointId == undefined) {
        return false;
      }
      // 如果什么都没填就直接返回
      if (!value) return true;
      // 如果传入的value和data中的label相同说明是匹配到了
      if (data.label.indexOf(value) !== -1) {
        return true;
      }
      // 否则要去判断它是不是选中节点的子节点
      return this.checkBelongToChooseNode(value, data, node);
    },
    // 判断传入的节点是不是选中节点的子节点
    checkBelongToChooseNode(value, data, node) {
      const level = node.level;
      // 如果传入的节点本身就是一级节点就不用校验了
      if (level === 1) {
        return false;
      }
      // 先取当前节点的父节点
      let parentData = node.parent;
      // 遍历当前节点的父节点
      let index = 0;
      while (index < level - 1) {
        // 如果匹配到直接返回
        if (parentData.data.label.indexOf(value) !== -1) {
          return true;
        }
        // 否则的话再往上一层做匹配
        parentData = parentData.parent;
        index ++;
      }
      // 没匹配到返回false
      return false;
    },
    // 节点单击事件
    handleNodeClick(data,node, obj) {
      this.pointId = data.pointId;
      if (typeof this.pointId === 'undefined') {
        this.$refs.tree.setCurrentKey(this.key);
        return
      }
      this.key=this.$refs.tree.getCurrentKey();
      this.$emit('handlePointClick', {pointId:this.pointId});
    }
  }
};
</script>
<style lang="scss">
  .treescroll {
    overflow-y: auto;
    height: calc(100vh - 158px);
  }
  .hasTagsView {
    .treescroll{
      height: calc(100vh - 162px);
    }
  }

</style>
